<template>
	<view class="feedback-page">
		<!-- 导航栏 -->
		<view class="navbar">
			<view class="left" @tap="goBack">
				<uni-icons type="back" size="24" color="#333333"></uni-icons>
			</view>
			<view class="center">
				<text class="title">帮助与反馈</text>
			</view>
			<view class="right"></view>
		</view>
		
		<!-- 内容区域 -->
		<view class="feedback-content-container">
			<!-- 常见问题 -->
			<view class="section-title first-title">
				<text>常见问题</text>
			</view>
			
			<view class="faq-list">
				<view 
					v-for="(item, index) in faqList" 
					:key="index" 
					class="faq-item"
					:class="{'active': activeIndex === index}"
					@tap="toggleFaq(index)"
				>
					<view class="faq-header">
						<text class="faq-question">{{item.question}}</text>
						<uni-icons :type="activeIndex === index ? 'top' : 'bottom'" size="16" color="#999"></uni-icons>
					</view>
					<view v-if="activeIndex === index" class="faq-answer">
						<text>{{item.answer}}</text>
					</view>
				</view>
			</view>
			
			<view class="divider"></view>
			
			<!-- 问题反馈 -->
			<view class="section-title">
				<text>问题反馈</text>
			</view>
			
			<view class="feedback-form">
				<view class="form-item">
					<view class="form-label">反馈类型</view>
					<view class="feedback-types">
						<view 
							v-for="(type, index) in feedbackTypes" 
							:key="index" 
							class="type-tag"
							:class="{'active': selectedType === index}"
							@tap="selectType(index)"
						>
							{{type}}
						</view>
					</view>
				</view>
				
				<view class="form-item">
					<view class="form-label">问题描述</view>
					<textarea 
						class="feedback-content" 
						v-model="feedbackContent" 
						placeholder="请详细描述您遇到的问题，以便我们更好地帮助您解决" 
						maxlength="500"
					></textarea>
					<view class="word-count">{{feedbackContent.length}}/500</view>
				</view>
				
				<view class="form-item">
					<view class="form-label">添加图片（选填）</view>
					<view class="image-uploader">
						<view v-for="(image, index) in uploadedImages" :key="index" class="image-item">
							<image :src="image" mode="aspectFill"></image>
							<view class="delete-btn" @tap.stop="deleteImage(index)">
								<uni-icons type="close" size="20" color="#fff"></uni-icons>
							</view>
						</view>
						<view v-if="uploadedImages.length < 3" class="upload-btn" @tap="chooseImage">
							<uni-icons type="camera" size="24" color="#999"></uni-icons>
						</view>
					</view>
				</view>
				
				<view class="form-item">
					<view class="form-label">联系方式（选填）</view>
					<input class="contact-input" v-model="contactInfo" placeholder="请留下您的微信或手机号，方便我们与您联系" />
				</view>
				
				<button class="submit-btn" :disabled="!isFormValid" @tap="submitFeedback">提交反馈</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue';

// FAQ 列表
const faqList = [
	{
		question: '如何修改个人资料？',
		answer: '进入"我的"页面，点击"编辑资料"按钮，即可进入个人资料编辑页面，在那里您可以修改头像、昵称、简介等信息。'
	},
	{
		question: '如何发布内容？',
		answer: '在底部导航栏点击中间的"+"按钮，进入发布页面，您可以编辑标题、内容、添加图片等，完成后点击"发布"按钮即可。'
	},
	{
		question: '如何关注其他用户？',
		answer: '您可以在浏览他人主页或帖子时，点击"关注"按钮即可关注该用户。您也可以通过搜索功能找到感兴趣的用户并关注。'
	},
	{
		question: '如何查看我的收藏？',
		answer: '在"我的"页面中，点击"收藏"选项，即可查看您收藏的所有内容。'
	},
	{
		question: '如何注销账号？',
		answer: '目前我们不支持自助注销账号，如需注销，请通过反馈功能联系我们的客服人员，我们会在核实身份后为您处理。'
	}
];

// 反馈类型列表
const feedbackTypes = ['功能建议', '产品体验', '内容相关', '账号相关', '其他问题'];

// 交互状态
const activeIndex = ref(-1);
const selectedType = ref(-1);
const feedbackContent = ref('');
const contactInfo = ref('');
const uploadedImages = ref([]);

// 表单校验
const isFormValid = computed(() => {
	return selectedType.value !== -1 && feedbackContent.value.trim().length > 0;
});

// 展开/收起FAQ
const toggleFaq = (index) => {
	if (activeIndex.value === index) {
		activeIndex.value = -1;
	} else {
		activeIndex.value = index;
	}
};

// 选择反馈类型
const selectType = (index) => {
	selectedType.value = index;
};

// 选择图片
const chooseImage = () => {
	uni.chooseImage({
		count: 3 - uploadedImages.value.length,
		sizeType: ['compressed'],
		sourceType: ['album', 'camera'],
		success: (res) => {
			uploadedImages.value = [...uploadedImages.value, ...res.tempFilePaths];
		}
	});
};

// 删除图片
const deleteImage = (index) => {
	uploadedImages.value.splice(index, 1);
};

// 提交反馈
const submitFeedback = () => {
	if (!isFormValid.value) return;
	
	// 显示提交中
	uni.showLoading({
		title: '提交中...'
	});
	
	// 模拟提交
	setTimeout(() => {
		uni.hideLoading();
		
		// 提交成功
		uni.showModal({
			title: '提交成功',
			content: '感谢您的反馈，我们会尽快处理您的问题！',
			showCancel: false,
			success: () => {
				// 重置表单
				selectedType.value = -1;
				feedbackContent.value = '';
				contactInfo.value = '';
				uploadedImages.value = [];
				
				// 返回上一页
				setTimeout(() => {
					uni.navigateBack();
				}, 500);
			}
		});
	}, 1500);
};

// 返回上一页
const goBack = () => {
	console.log('返回按钮被点击');
	uni.navigateBack({
		delta: 1,
		fail: () => {
			uni.switchTab({
				url: '/pages/user/me'
			});
		}
	});
};
</script>

<style>
.feedback-page {
	background-color: #f8f8f8;
	min-height: 100vh;
}

.navbar {
	height: 40px;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	padding: 0 15px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	position: sticky;
	top: 0;
	z-index: 100;
}

.left, .right {
	width: 60px;
	display: flex;
	align-items: center;
}

.center {
	flex: 1;
	text-align: center;
}

.title {
	font-size: 18px;
	font-weight: 500;
	color: #333;
}

.feedback-content-container {
	padding: 5px 15px;
}

.section-title {
	margin: 5px 0;
}

.section-title text {
	font-size: 16px;
	font-weight: 600;
	color: #333;
}

.first-title {
	margin-top: 0;
}

.faq-list {
	background-color: #ffffff;
	border-radius: 8px;
	overflow: hidden;
}

.faq-item {
	padding: 12px 15px;
	border-bottom: 1px solid #f0f0f0;
}

.faq-item:last-child {
	border-bottom: none;
}

.faq-item.active {
	background-color: #f9f9f9;
}

.faq-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.faq-question {
	font-size: 15px;
	color: #333;
	font-weight: 500;
}

.faq-answer {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed #eee;
	font-size: 14px;
	color: #666;
	line-height: 1.5;
}

.divider {
	height: 8px;
	background-color: #f8f8f8;
	margin: 15px 0;
}

.feedback-form {
	background-color: #ffffff;
	border-radius: 8px;
	padding: 12px 15px;
}

.form-item {
	margin-bottom: 15px;
}

.form-label {
	font-size: 15px;
	color: #333;
	margin-bottom: 10px;
	font-weight: 500;
}

.feedback-types {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.type-tag {
	padding: 8px 15px;
	border-radius: 100px;
	background-color: #f5f5f5;
	color: #666;
	font-size: 14px;
}

.type-tag.active {
	background-color: #e6f2ff;
	color: #0078ff;
}

.feedback-content {
	width: 100%;
	height: 150px;
	padding: 10px;
	background-color: #f9f9f9;
	border-radius: 8px;
	font-size: 14px;
	color: #333;
	line-height: 1.5;
}

.word-count {
	text-align: right;
	font-size: 12px;
	color: #999;
	margin-top: 5px;
}

.image-uploader {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.image-item {
	width: 100px;
	height: 100px;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
}

.image-item image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.delete-btn {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 24px;
	height: 24px;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.upload-btn {
	width: 100px;
	height: 100px;
	background-color: #f5f5f5;
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px dashed #ddd;
}

.contact-input {
	width: 100%;
	height: 40px;
	padding: 0 10px;
	background-color: #f9f9f9;
	border-radius: 8px;
	font-size: 14px;
}

.submit-btn {
	margin-top: 20px;
	width: 100%;
	height: 45px;
	background-color: #0078ff;
	color: white;
	font-size: 16px;
	border-radius: 8px;
}

.submit-btn:disabled {
	background-color: #c1d9ff;
}
</style> 